<template>
	<view class="od-item marginbottom20">
		<view class="item-tip" style="padding-right: 12px;" @click="openPopup">服务领域<image  src="@/static/img/question.png" mode=""
				style="width: 30rpx;height: 30rpx"></image>
		</view>
		<view class="item-right" @click="openServiceArea()">
			<view class="service-list inline-list">
				<view class="service-item active" :style="bearFees == '自费' ? 'width:calc((100% - 40rpx) / 2);' : 'width: calc((100% - 40rpx) / 2);'">{{ area_name }}</view>
			</view>
			<text class="cjg blue" v-if="info.product.product == '私人律师'"
				@click.stop="jump('/pages/client/order/cang')">藏经阁</text>
			<view class="item-nav">
				<image src="@/static/img/right.png" mode="aspectFit"
					v-if="info.product.product != '刑事会见' && info.product.product != '打官司'"></image>
			</view>
		</view>
		<!-- 服务领域组件 -->
		<order-service-area ref="orderServiceArea" :info="info" v-if="Object.keys(info.product).length > 0"
			@confirm="confirm"></order-service-area>
            <uni-popup ref="popupArea" type="bottom"  @change="removeCss($event)">
                <view class="popup-bottom-box">
                	<view class="bot-title">
                		<view class="title-txt">服务领域选择说明</view>
                		<view class="title-close" @click="close">
                			<view class="image-wrapper">
                				<image src="@/static/img/close.png" mode="aspectFit"></image>
                			</view>
                		</view>
                	</view>
                  <scroll-view scroll-y="true" class="bot-con">
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">债权债务</view>
                    </view>
                    <view class="bot-content-box">
                      借款、货款、租金、装修款、质保金、物业管理费、加工费、理财款、转让款等欠款纠纷。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">合同事务</view>
                    </view>
                    <view class="bot-content-box">
                      赠与、转让店铺、加盟代理、买卖、仓储保管、融资租赁、中介服务、雇佣、劳务、运输等往来合同事务，业务商务谈判，履约追踪，合同管理等欠款以外的合同纠纷。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">侵权赔偿</view>
                    </view>
                    <view class="bot-content-box">
                      人身伤害、财产损害、产品质量损害、交通事故、名誉权、隐私权、精神损害、打假纠纷、商标/专利/著作权侵权纠纷、网络侵权纠纷、商标申请/续期/变更/转让、专利认定/申请/许可使用、著作权保护/转让/许可、商业秘密保护等。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">公司经营</view>
                    </view>
                    <view class="bot-content-box">
                      出资/合伙、股东会/董事会决议事务、股权转让、代持、增资扩股、股份回购、退股、公司控制权等股东间纠纷，投融资法律事务，董事/监事/高级管理人员管理风险等公司内部纠纷。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">婚姻继承</view>
                    </view>
                    <view class="bot-content-box">
                      离婚、夫妻财产分割、夫妻债务承担、小孩抚养、财富传承（遗嘱、继承）、家庭财产纠纷等。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">劳动工伤</view>
                    </view>
                    <view class="bot-content-box">
                      劳动合同、保密合同、竞业禁止合同等纠纷，员工入职、调岗调薪、离职、辞退、经济补偿金、工伤认定、工伤赔偿标准等劳动争议处理，员工手册、规章制度的审修，劳动关系和人事关系等。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">房产土地</view>
                    </view>
                    <view class="bot-content-box">
                      延迟交房、延迟办证、二手房买卖、农民房/宅基地纠纷、确权过户、产权分割、拍卖、工程款、房屋质量等。
                    </view>
                    <view class="bot-title-box">
                      <view class="icon-box"></view>
                      <view class="title-text-box">治安刑事</view>
                    </view>
                    <view class="bot-content-box">
                      打架斗殴、诈骗、交通肇事、重伤、轻伤、行贿受贿、职务侵占、挪用资金、逃税、公司经营中的刑事责任等。
                    </view>
                  </scroll-view>
                        <view class="bot-save">
                            <view class="save-box" @click="close">朕知道了</view>
                        </view>
                    </view>
            </uni-popup>
	</view>
</template>

<script>
	import $ from "jquery";

  export default {
		props: ['info','bearFees'],
		data() {
			return {
				area_name: '',
        is_poup:false,//是否打开弹窗
			};
		},
		created() {
			this.area_name = this.info.product.area.area_name;
		},
		methods: {
      removeCss(e){
         this.is_poup = e.show
        if(this.is_poup){
          $(document.body).css({'overflow':'hidden'})
        }else{
          $(document.body).css({'overflow':''})
        }
      },
			async confirm(current_area) {
				this.area_name = current_area.area_name;
				this.$bus.$emit('changeDesc', current_area);
				this.$emit('changeMeet', current_area)
			},
			openServiceArea() {
				if (this.info.product.product != '刑事会见' && this.info.product.product != '打官司') {
					this.$refs.orderServiceArea.$refs.popupChooseServiceArea.open();
				}
			},
            openPopup(){
              this.$refs.popupArea.open();
            },
            close(){
                this.closePop('popupArea')
            }
		}
	};
</script>

<style lang="scss">
	.cjg {
		padding: 0 40rpx;
		position: absolute;
		right: 0rpx;
		height: 62rpx;
		line-height: 62rpx;
	}

	.od-box .od-item .item-tip {
		font-size: 12px;
		width: 214rpx;
    margin-right:0rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
	}

	.service-list {
		display: flex;
		align-items: center;
	}
    .service-list .service-item.active {
    	color: #F9B804;
    	font-size: 24rpx!important;
    	background-color: #FFFFFF;
    	border-radius: 0;
    	margin-left: 10rpx;
    }
    .popup-bottom-box {
    	background-color: #ffffff;
    	overflow: auto;
    	// border-top-left-radius: 26rpx;
    	// border-top-right-radius: 26rpx;

    	.bot-title {
    		display: flex;
    		align-items: center;

    		.title-txt {
    			flex: 1;
    			text-align: center;
    			padding: 20rpx;
    			font-weight: bold;
    		}

    		.title-close {
    			width: 80rpx;
    			height: 80rpx;
    			text-align: center;
    			position: absolute;
    			top: 0;
    			right: 0;
    			display: flex;
    			align-items: center;
    			justify-content: center;

    			.image-wrapper {
    				width: 26rpx;
    				height: 26rpx;
    				vertical-align: middle;

    				image {
    					width: 100%;
    					height: 100%;
    				}
    			}
    		}
    	}

    	.bot-con {
    		padding: 0 30rpx;
            height: 800rpx;
            width: calc(100% - 60rpx);
            // overflow-y: scroll;
    		.service-list {
    			margin-bottom: 20rpx;
    		}
            .bot-title-box{
                display: flex;
                align-items: center;
                height: 45rpx;
                .icon-box{
                    width: 12rpx;
                    height: 30rpx;
                    background: #FFC900;
                    opacity: 1;
                    border-radius: 6rpx;
                }
                .title-text-box{
                    margin-left: 5rpx;
                    height: 45rpx;
                    font-size: 32rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #000000;
                    opacity: 1;
                }
            }
            .bot-content-box{
                margin: 10rpx 0rpx 10rpx 17rpx;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: rgba(0,0,0,0.6);
                opacity: 1;
                span{
                    color: #000;
                    font-weight: 600;
                }
            }
            .line-box{
                width: 100%;
                height: 1rpx;
                border: 1px solid #D5D5D5;
                background-color: #D5D5D5;
                margin: 15rpx 0rpx;
            }
    	}
        .bot-save{
            width: 100%;
            height: 102rpx;
            background: rgba(255, 255, 255, 0.39);
            box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.16);
            opacity: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .save-box{
               width: 60%;
                height: 60rpx;
                // border-radius: 30rpx;
                background-color: #F9B804;
                color: #fff;
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>
